<template>
	<van-cell-group>
		<van-nav-bar title="修改密码" left-arrow right-text="保存密码" @click-left="back" @click-right="save"/>
		<van-field v-model="form.oldpassword" type="password" label="旧密码" placeholder="请输入旧密码" clearable />
		<van-field v-model="form.password" type="password" label="新密码" placeholder="请输入新密码" clearable />
		<van-field v-model="form.password_confirmation" type="password" label="确认密码" placeholder="请输入确认密码" clearable />
		<van-field v-model="form.captcha" label="验证码" placeholder="请输入图形验证码" clearable>
			<img slot="icon" v-bind:src="captcha" v-on:click="randCaptcha">
		</van-field>
	</van-cell-group>
</template>
<script>
	import { Cell, CellGroup,NavBar,Icon,Field} from 'vant';
	import Va from 'async-validator';

	const formRule = {
	  	oldpassword: [
	  		{type: "string", required: true,message :'请填写旧密码'},
	  		{ min: 6, max: 15,message : '密码长度6-15'}
	  	],
	  	password : [
	  		{type : "string" , required: true , message : '请填写新密码'},
	  		{ min: 6, max: 15,message : '密码长度6-15'}
	  	],
	  	password_confirmation : [
	  		{type : "string" , required: true , message : '请填写确认密码'},
	  		{ min: 6, max: 15,message : '密码长度6-15'}
	  	],
	  	captcha : [
	  		{type : "string" , required: true , message : '请填写图形验证码'},
	  	],
	};

	export default{
		props: {
	        callback:{
	            type: Function,
	        },
	        popup :{
	        	type : Boolean,
	        	default : false
	        }
	    },
		components :{
			[Cell.name] : Cell,
	    	[CellGroup.name] : CellGroup,
	    	[NavBar.name] : NavBar,
	    	[Field.name] : Field,
		},
		data () {
			return {
				form :{
					oldpassword : '',
					password : '',
					password_confirmation : '',
					captcha : '',
					path:this.$route.path
				},
				captcha : '',
			}
		},
		methods:{
			back(){
	        	if (this.popup) {
	        		this.callback();
	        	}else{
	        		window.history.go(-1);
	        	}
	        },
	        save(){
	        	new Va(formRule).validate(this.form, (errors, fields) => {
				  	if(errors) {
				  		this.$toast(errors[0].message);
				  		return false;
				  	}
				  	this.Axios.Home.Account.UpdatePwd(this.form)
			        .then(res =>{
			        	if(!res) return false;
			        	window.location.href='/auth/';
			        })
				});
	        },
			randCaptcha(){
	        	this.captcha = '/captcha?'+new Date().getTime();
	        },
	        init(){
				this.form.oldpassword = '';
				this.form.password = '';
				this.form.password_confirmation = '';
				this.form.captcha = '';
				this.randCaptcha();
			}
		},

	}
</script>
